<template>
    <div id="map" v-loading="loading">
        <total :data="total" :id="tree.id" more="1"/>
        <baidu-map :min-zoom="9" :mapClick="false" scroll-wheel-zoom class="map" @ready="handler">
            <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"/>
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_LEFT" showAddressBar autoLocation/>

            <!--<bml-marker-clusterer :averageCenter="true">
                <bm-marker v-if="x.lng!=0 && x.lat!=0" :title="x.name" :key="x.id" v-for="(x,i) of tree.childrens" animation="BMAP_ANIMATION_BOUNCE" :position="{lng: x.lng, lat: x.lat}" @click="clickMarker(x)">
                    <bm-label content="告警" :position="{lng: x.lng, lat: x.lat}"/>
                </bm-marker>
            </bml-marker-clusterer>-->

            <!--当前为地点-->
            <bm-marker v-if="x.lng!=0 && x.lat!=0" :title="x.name" :key="x.id" v-for="(x,i) of tree.childrens" :animation="`BMAP_ANIMATION_${x.warn?'BOUNCE':'DROP'}`" :position="{lng: x.lng, lat: x.lat}" @click="clickMarker(x)">
                <bm-label v-if="x.warn" content="告警" :position="{lng: x.lng, lat: x.lat}"/>
            </bm-marker>

            <!--当前为机房-->
            <bm-marker v-if="tree.level==4" :animation="`BMAP_ANIMATION_${tree.warn?'BOUNCE':'DROP'}`" :title="tree.name" :position="{lng:tree.lng, lat: tree.lat}">
                <bm-label v-if="tree.warn" content="告警" :position="{lng:tree.lng, lat: tree.lat}"/>
            </bm-marker>

            <!--弹窗-->
            <transition name="el-zoom-in-center">
                <bm-overlay v-show="show" class="content" pane="labelPane" @draw="draw">
                    <div class="head">
                        <router-link :to="'index/detail/'+tree.id">{{tree.name}}</router-link>
                        <i class="el-icon-close" @click="show = false"></i>
                    </div>
                    <div class="body">
                        <img :src="img_pre+detail.environment_pic" alt="">
                        <ul>
                            <li><span>本月电量：</span>{{detail.ydl || 0}}</li>
                            <li><span>机房报警：</span>{{detail.type==1?'有':'无'}}预警</li>
<!--                            <li><span>在线状态：</span>{{detail.status==1?'在':'离'}}线</li>-->
                            <li><span>在线状态：</span>在线</li>
<!--                            <li><span>更新时间：</span>{{detail.updateTime}}</li>-->
                            <li><span>更新时间：</span>{{new Date().toLocaleDateString()}}</li>
                        </ul>
                    </div>
                </bm-overlay>
            </transition>
        </baidu-map>
    </div>
</template>

<script type="text/ecmascript-6">
    import {BmlMarkerClusterer } from 'vue-baidu-map'
    import Total from '../../component/Total'
    export default {
        data() {
            return {
                img_pre:IMAGE_PREFIX,
                total: {
                    machineRoomCount:{name: '机房数量', class: ''},
                    conditionerCount:{name: '空调数量', class: 'air-conditioner'},
                    totalEnergyCount:{name: '总能耗', class: 'all-energy'},
                    yearEnergyCount:{name: '本年能耗', class: 'year-energy'},
                    monthEnergyCount:{name: '本月能耗', class: 'month-energy'},
                    alarmCount:{name: '报警次数', class: 'warning'},
                },
                show: false,
                detail:{},//机房信息
                map:{},
                BMap:{},
                tree:{},
                loading:false
            }
        },
        methods: {
            handler({BMap,map}) {
                this.BMap=BMap;
                this.map=map;
                map.centerAndZoom('中山市');
            },
            draw({el,BMap,map}) {
                if(!this.tree.lng) return;
                const {lng, lat} = this.tree;
                const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat));
                el.style.left = pixel.x + 'px';
                el.style.top = pixel.y - 170 + 'px'
            },
            clickMarker(data){
                this.$store.commit('setTree',data)
            }
        },
        watch:{
            '$store.state.tree'(data){
                if(!data) return ;
                let BMap=this.BMap,map=this.map;
                this.tree=data;
                this.show=false;
                //过滤第一次加载
                if(!map.centerAndZoom) return ;
                let view = map.getViewport(this.tree.childrens);
                //机房
                if(data.level==4){
                    this.loading=true;
                    map.centerAndZoom(new BMap.Point(data.lng,data.lat),16);
                    this.show=true;
                    this.$axios.map.map_list({deptId:this.tree.id}).then(v=>{
                        this.loading=false;
                        if(v.code==200) this.detail=v.data[0];
                    });
                }else{
                    if(view.center.lng==0) {
                        map.centerAndZoom(new BMap.Point(data.lng,data.lat),14);
                        return ;
                    }
                    map.centerAndZoom(new BMap.Point(view.center.lng,view.center.lat),view.zoom);
                }
            }
        },
        components:{BmlMarkerClusterer,Total}
    }
</script>
<style lang="less" rel="stylesheet/less">
    #map {
        position: relative;
        .total {
            height: 120px;
            background: linear-gradient(to bottom, #fff, #f0f0f0 78%, #fff);
            box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
            position: absolute;
            top: 15px;
            left: 15px;
            z-index: 3;
        }

        .map {
            height: 100%;
            width: 100%;
            .content {
                width: 280px;
                height: 170px;
                background: #fff;
                position: absolute;
                border: 3px solid rgba(0, 0, 0, .2);
                background: linear-gradient(to bottom, #fff, #f0f0f0 78%, #fff);

                .head {
                    line-height: 40px;
                    border-bottom: 1px solid #eee;
                    color: #1148ae;
                    font-size: 16px;
                    padding: 0 15px;

                    i {
                        float: right;
                        display: block;
                        line-height: 40px;
                        color: #aaa;
                        font-weight: bold;
                        font-size: 14px;
                        cursor: pointer;
                    }
                }

                .body {
                    padding: 10px 15px;
                    font-size: 12px;
                    overflow: hidden;

                    img {
                        float: left;
                        width: 100px;
                        height: 100px;
                        background: #eee;
                    }

                    ul {
                        float: right;
                        width: calc(~'100% - 115px');

                        li {
                            margin: 0 0 5px;
                            line-height: 20px;
                            color: #1148ae;

                            span {
                                color: #555;
                                width: 65px;
                                display: inline-block;
                            }
                        }
                    }
                }
            }
            .BMapLabel{
                background: rgba(255, 0, 0, 0.5) 0!important;
                border: 0!important;
                width: 40px;
                text-align: center;
                border-radius: 2px;
                color: #fff;
                line-height: 20px!important;
                font-size: 12px!important;
                left: -10px!important;
                top: 25px!important;
            }
            .BMap_Marker.BMap_noprint{
                @keyframes mark{
                    0%{transform:scale(0);opacity: 1}
                    50%{transform:scale(.5);opacity:.8}
                    100%{transform:scale(1);opacity: 0}
                }
                &::before,&::after{
                    transform: scale(0);
                    content:'';
                    position: absolute;
                    top: 100%;
                    left:50%;
                    margin: -40px 0 0 -40px;
                    display: block;
                    height: 80px;
                    width: 80px;
                    background: radial-gradient(transparent,#0CB0F7);
                    border-radius: 50%;
                    animation:mark 1s infinite linear;
                }
                &::after{
                    animation:mark 1s infinite linear .5s;
                }
                &>img{
                    position: relative;
                    z-index: 3;
                }
            }
        }
    }
</style>
